<script>
  ;(function setColorModeVar(initialValue) {
    const mql = window.matchMedia('(prefers-color-scheme: dark)')
    const systemPreference = mql.matches ? 'dark' : 'light'

    let persistedPreference

    try {
      persistedPreference = localStorage.getItem('chakra-ui-color-mode')
    } catch (error) {
      console.log(
        'Chakra UI: localStorage is not available. Color mode persistence might not work as expected'
      )
    }

    const isInStorage = typeof persistedPreference === 'string'

    let colorMode

    if (isInStorage) {
      colorMode = persistedPreference
    } else {
      colorMode = initialValue === 'system' ? systemPreference : initialValue
    }

    if (colorMode) {
      const root = document.documentElement
      root.style.setProperty('--chakra-ui-color-mode', colorMode)
    }
  })('light')
</script>
